import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { HashRouter as Router, Switch, Route, NavLink, Redirect } from 'react-router-dom'

import './index.scss'
import Classroom from './classroom' //引入这两个引入的路由文件
import Equipment from './equipment'
import { Toast, Modal } from 'antd-mobile';
const alert = Modal.alert;
const element1 =(
  <><img src="images/jg_03.png" alt=""/><p>关机指令发送成功！</p></>
)

class Com extends Component {
  state={
    fall:false
  }
  render () {
    return (
      <Fragment>
        <header className="header equipment-header">
          <div className="equipment-h-s">
            <span className="iconfont icon-arrow-left" onClick={() => {
              this.props.history.push('/application')
            }}></span>
            <span>设备管控</span>
            <span className="equipment-cz" onClick={() =>
              alert('一键全关', '请确认是否继续关闭全部设备', [
                { text: '取消', onPress: () => console.log('cancel') },
                { text: '继续', onPress: () => {
                  Toast.info(element1, 1);
                } },
              ])
            }>一键全关</span>
          </div>
          <p className="equipment-p">
            {/* 这里跳转的路径必须是当前页面下再进行跳转的 */}
            <NavLink to='/application/equipment/equipment'>设备
            <span></span>
            </NavLink>
            <NavLink to='/application/equipment/classroom'>教室
            <span></span>
            </NavLink>
          </p>
        </header>
        <div className="content equipment-content">
          <div className="equipment-h-x">
              当前共15台设备运行中
          </div>
          <div className='box equipment-box'>
            <Router>
              <Switch>
                <Route path='/application/equipment/classroom' component={ Classroom } />
                <Route path='/application/equipment/equipment' component={ Equipment } />
                <Redirect path='/application/equipment' exact to='/application/equipment/equipment' />
              </Switch>
            </Router>
          </div>
        </div>
      </Fragment>
    )
  }
}
export default connect()(Com)